
<template>
  <div>
    <div class="top" :class="{ fixed: fixed }">
      <p>
        <input
          placeholder="搜索"
          type="text"
          @keyup.enter="search"
          v-model="info"
        />
      </p>
      <span @click="gourl">取消</span>
    </div>
    <div class="hotSearch" v-show="show">
      <div class="search_top">
        <h4>
          热搜榜
          <van-icon name="fire-o" color="#ee0a24" />
        </h4>
        <span class="iconfont icon-paihangbang"></span>
      </div>
      <div class="search_bot" :style="{ height: height + 'px' }">
        <span v-for="(item, index) in hot" :key="'search_hot' + index">
          <i>{{ index + 1 }}</i
          >{{ item.searchWord | Tostr }}
        </span>
      </div>
      <b @click="more">点击加载更多</b>
    </div>

    <div
      ref="song_wrapper"
      class="song_wrapper"
      :style="{ height: height1 + 'px' }"
    >
      <ul class="list">
        <li
          class="songs"
          v-for="(item, index) in musicList"
          :key="'musicList_' + index"
          @click="munsicplay(item.id, item.name)"
        >
          <span>{{ item.name }}</span>
          <span><i class="iconfont icon-iconset0481"></i></span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
import Vue from "vue";
import { Search, Icon } from "vant";
Vue.use(Search);
Vue.use(Icon);
import "@/assets/iconfont/iconfont.css";
export default {
  data() {
    return {
      info: "",
      musicList: [],
      hot: [],
      musicSrc: "",
      fixed: false,
      show: false,
      fixed_t: false,
      height: 150,
      show: true,
      height1: 0,
      bs: null,
    };
  },
  mounted() {
    window.addEventListener("scroll", (e) => {
      if (document.documentElement.scrollTop > 100) {
        this.fixed = true;
      }
    });

    this.$http
      .get(`http://localhost:3000/search/hot/detail`)
      .then((res) => (this.hot = res.data));
  },
  updated() {
    this.height1 = document.documentElement.clientHeight - 50;
    this.$nextTick(() => {
      this.bs = new BScroll(this.$refs["song_wrapper"], {
        pullUpLoad: true,
        pullDownRefresh: true,
        click: true,
      });
    });
  },
  methods: {
    search() {
      this.show = false;
      this.$http
        .get(`http://localhost:3000/search?keywords=${this.info}`)
        .then((res) => (this.musicList = res.result.songs));
    },
    munsicplay(id, names) {
      this.$router.push({ name: "musicplay", params: { id, names } });
    },
    more() {
      this.height = 300;
    },
    gourl() {
      this.$router.push({ name: "find" });
    },
  },
};
</script>

<style lang="scss" scoped>
.song_wrapper {
  overflow: hidden;
  // background-color: red;
  // height: 400px;
  // background-color: pink;
  margin-top: 0px;
}

.fixed_t {
  position: fixed;
  top: 50px;
  z-index: 123456789;
}
.fixed {
  position: fixed;
  top: 0;
  z-index: 123456789;
}
.top {
  background-color: #fff;
  width: 355px;
  display: flex;
  height: 50px;
  // background-color: #de132c;
  padding: 0 10px;
  justify-content: space-between;
  align-items: center;
  input {
    height: 35px;
    border: none;
    width: 260px;
    padding: 0 20px;
    border-radius: 18px;
    background-color: #f1f3f4;
  }
}
.list {
  width: 345px;
  padding: 0 15px;
  .songs {
    width: 345px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
    justify-content: space-between;
    height: 60px;
  }
  // .songs:nth-last-child() {
  //   margin-bottom: 100px;
  // }
  span {
    font-size: 18px;
    margin-right: 10px;
    i {
      font-size: 20px;
    }
  }
}
.footer_play {
  height: 50px;
  bottom: 0;
  width: 375px;
  audio {
    width: 100%;
    height: 100%;
    outline: none;
    background-color: #f1f3f4;
  }
}
.hotSearch {
  margin-top: 15px;
  width: 345px;
  padding: 0 15px;
  position: relative;
  .search_top {
    display: flex;
    justify-content: space-between;
  }
  .search_bot {
    margin-top: 15px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    justify-content: flex-start;
    span {
      width: 46%;
      font-size: 16px;
      color: black;
      line-height: 30px;
      font-weight: bold;
      i {
        margin-right: 10px;
      }
    }
    b {
      display: block;
      position: absolute;
      bottom: 0px;
      font-size: 14px;
      height: 30px;
      width: 100%;
      text-align: center;
    }
  }
}
</style>
